import { Image, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import { _, WMkit, wxAuth } from 'wmkit';
import api from 'api';
import { AtTabs, AtTabsPane, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui';
import 'taro-ui/dist/style/components/tabs.scss';
import './CommentList.less';
import Blank from '@/pages/common/blank';
import { returnTime } from '@/utils/returnTime';
import zan from '@/assets/image/community/zan.png';
import zanCurr from '@/assets/image/community/zan-curr.png';
import nones from '@/assets/image/none/message-comment.png';

type commentProps = T.IProps & T.commentProps;
//@ts-ignore
@connect<Partial<commentProps>, T.IPostState>(store2Props, actions)
export default class post extends Component<Partial<commentProps>, T.commentState> {
  constructor(props) {
    super(props);
    this.state = {
      clickLikeVal: false
    };
  }

  componentDidMount() { }

  //数据列表
  renderList(list) {
    let listView = [];
    list.map((item, index) => {
      listView.push(
        <View
          style={{
            marginTop: '15px',
            flexDirection: 'row',
          }}>
          <View
            style={{
              width: '70rpx',
              height: '70rpx',
              borderRadius: '35rpx',
              overflow: 'hidden',
            }}>
            <Image
              style={{
                width: '70rpx',
                height: '70rpx',
              }}
              mode="aspectFill"
              src={item.userImg}
            />
          </View>
          <View
            style={{
              flex: 1,
              marginLeft: '15px',
              borderBottom: '2px solid #F7F7F7',
              paddingBottom: '10px',
            }}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <View
                style={{
                  flexDirection: 'column',
                  alignContent: 'center',
                  justifyContent: 'center',
                }}>
                <Text className='f_28'>{item.userName}</Text>
                <Text className='f_22'>
                  {returnTime(item.date)}
                </Text>
              </View>
              <View
                style={{
                  flexDirection: 'column',
                  marginTop: '15px',
                }}
                onClick={() => this.LikeClick(item, index, item.thumbFlag)}>
                {item.thumbFlag ? (
                  <Image className='b_icon' src={zan} />
                ) : (
                  <Image className='b_icon' src={zanCurr} />
                )}
                <Text className='f_22' style={{ textAlign: 'center' }}>
                  {item.thumbNum}
                </Text>
              </View>
            </View>
            <View>
              <Text className='f_24'>{item.content}</Text>
            </View>
          </View>
        </View>,
      );
    });
    return listView;
  }

  //点赞、取消点赞
  async LikeClick(item, index, type) {
    let { clickLikeVal } = this.state;
    let itemStr = Taro.getStorageSync('b2b-wechat@login')
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return
    }
    if (clickLikeVal) {
      return;
    }
    this.setState(
      {
        clickLikeVal: true,
      },
      () => {
        let {
          main: { commentList },
          actions: { action },
        } = this.props;
        if (type) {
          //点赞后处理
          commentList[index].thumbFlag = !type;
          commentList[index].thumbNum += 1;
          action.commonChange('main.commentList', commentList)
        } else {
          //取消点赞后处理
          commentList[index].thumbFlag = !type;
          commentList[index].thumbNum -= 1;
          action.commonChange('main.commentList', commentList)
        }
        let params = {
          userId: itemStr.user.id,
          targetId: item.id,
          type: 2,
        }
        if (type) {
          //点赞
          action.addThumb(params);
        } else {
          //取消点赞
          action.deleteThumb(params);
        }
        this.setState({
          clickLikeVal: false,
        });
      })

  }

  render() {
    let {
      main: { commentList, pageNum, totalPages, isLoading },
      actions: { action },
    } = this.props;
    return (
      <View>
        {commentList.length > 0 ? (
          this.renderList(commentList)
        ) : (
          <Blank
            content='该帖子还未收到过评论~'
            img={nones}
            imgStyle={{ width: '343rpx', height: '288rpx' }}
            textStyle={{
              fontSize: '28rpx',
              color: '#BFBFBF',
              textAlign: 'center',
              marginTop: '40rpx',
            }}
          />
        )}
        {commentList.length != 0 && pageNum != totalPages && <View className="status">加载中</View>}
        {!isLoading && commentList.length != 0 && pageNum == totalPages && (
          <View className="status">已经到底了~</View>
        )}
      </View>
    );
  }
}
